<template>
  <div class="batch-withhold">
    <Modal
      v-model="show"
      title="批量代扣"
      footer-hide>
      <div class="modal-main">
        <Form
          ref="batchForm"
          :model="batchForm"
          :rules="batchRules"
          :label-width="80"
          label-position="left">
          <FormItem label="还款类型" prop="type">
            <Select v-model="batchForm.type" placeholder="请选择扣款类型" @on-change="handleType">
              <Option value="part">部分还款</Option>
              <Option value="payoff">结清</Option>
              <Option value="extend">展期</Option>
            </Select>
          </FormItem>
          <FormItem label="还款金额" prop="money" v-show="isMoney" ref="batchMoney">
            <Input
              type="text"
              placeholder="请输入还款金额（元）"
              v-model="batchForm.money"
              number />
          </FormItem>
          <FormItem label="展期天数" prop="extendDays" v-show="isExtendDays" ref="batchExtend">
            <Select v-model="batchForm.extendDays" placeholder="请选择展期天数">
              <Option :value="item" v-for="(item, index) in extendDaysList" :key="index">{{ item }}</Option>
            </Select>
          </FormItem>
          <FormItem label="是否锁定" prop="isLock">
            <RadioGroup v-model="batchForm.isLock">
              <Radio :label="0">否</Radio>
              <Radio :label="1">是</Radio>
            </RadioGroup>
            </FormItem>
          <FormItem style="margin-top: 48px;">
            <Button type="primary" :loading="batchLoading" @click="handleBatchSubmit">提交</Button>
            <Button style="margin-left: 10px" @click="handleBatchCancel">取消</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script>
  const COMPONENT_NAME = 'batch-withhold';
  import { deepCopy } from '@/libs/util';

  export default {
    name: COMPONENT_NAME,
    props: {
      value: Boolean,
      data: {
        type: Array,
        default: []
      }
    },
    computed: {
      isMoney() {
        return this.batchForm.type === 'part';
      },
      isExtendDays() {
        return this.batchForm.type === 'extend';
      }
    },
    data() {
      const validateExtend = (rule, value, callback) => {
        if (this.isExtendDays) {
          if (value <= 0) return callback(new Error('请选择展期天数'));
        }
        callback();
      }
      const validateMoney = (rule, value, callback) => {
        if (this.isMoney) {
          if (value <= 0) return callback(new Error('请输入还款金额'));
        }
        callback();
      }
      return {
        show: this.value,
        batchForm: {
          orderIds: [],
          money: 0,
          type: '',
          isLock: 0,
          extendDays: 0
        },
        batchRules: {
          type: [
            { required: true, message: '请选择还款类型', trigger: 'change' }
          ],
          money: [
            { required: true, type: 'number', message: '请输入还款金额', trigger: 'blur' },
            { validator: validateMoney, trigger: 'blur' }
          ],
          extendDays: [
            { required: true, type: 'number', message: '请选择展期天数', trigger: 'change' },
            { validator: validateExtend, trigger: 'change' }
          ],
          isLock: [
            { required: true, type: 'number', message: '请选择是否锁定', trigger: 'change' }
          ]
        },
        batchLoading: false,
        extendDaysList: []
      }
    },
    watch: {
      value(val) {
        this.show = val;
        if (val) {
          this.batchForm.orderIds = this.data.slice(0);
          this.getExtendDays();
        }
      },
      show(val) {
        this.$emit('input', val);
        this.$refs.batchForm.resetFields();
      }
    },
    methods: {
      // 获取展期天数
      getExtendDays() {
        this.$http.get('/helsinki/admin/order/extend-days11')
        .then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            this.extendDaysList = data;
          }
        })
      },
      // 还款类型change事件
      handleType(val) {
      },
      // 提交
      handleBatchSubmit() {
        const { batchForm } = this.$refs;
        batchForm.validate(valid => {
          if(valid) {
            this.batchLoading = true;
            this.$http.post('/helsinki/admin/order/repay-withhold-batch', {
              ...this.batchForm
            }).then(({ data: { errcode, info, data } }) => {
              if (errcode == 0) {
                this.$Message.success(info);
                this.show = false;
                this.$emit('ok');
              }
              this.batchLoading = false;
            })
          }
        });
      },
      // 取消
      handleBatchCancel() {
        this.show = false;
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

